<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作各种形状</title>
    <style>
        body>div{
            float:left;
            margin-right: 30px;
        }
        /*圆形*/
        .shape1{
            width:100px;
            height:100px;
            border-radius: 50px;
            background-color: red;
        }
        /*扇形*/
        .shape2{
            width:0;
            height:0;
            border:50px solid transparent;
            border-radius: 50%;
            border-bottom-color: red;
            border-right-color: red;
            -webkit-transform: rotate(45deg);
        }
        /*椭圆形*/
        .shape3{
            width:50px;
            height:100px;
            border-radius: 30px;
            background-color: red;
        }
        .shape4{
            width:100px;
            height:50px;
            border-radius: 30px;
            background-color: red;
        }
        /*叶形*/
       .shape5{
           width:50px;
           height:50px;
           background-color: red;
           border-radius: 0 50% 0 50%;
        }
        /*正方形*/
        .shape6{
            width:0;
            height:0;
            border:50px solid red;
        }
        /*下角标*/
        .shape7{
            width:0;
            height:0;
            border:50px solid red;
            border-bottom-color:transparent;
        }
        /*上角标*/
        .shape8{
            width:0;
            height:0;
            border:50px solid red;
            border-top-color:transparent;
        }
        /*等腰三角形*/
        .shape9{
            width:0;
            height:0;
            border:50px solid red;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        .shape10{
            width:0;
            height:0;
            border:50px solid transparent;
            border-top-color: red;
            border-right-color: red;
        }
        .shape11{
            width:0;
            height:0;
            border:50px solid transparent;
            border-left-color: red;
            border-bottom-color: red;
        }
        /*等腰三角形  箭头*/
        .shape12{
            width:0;
            height:0;
            border:50px solid transparent;
            border-top-color: red;
            border-bottom: 0;
        }
        .shape13{
            width:0;
            height:0;
            border:50px solid transparent;
            border-right-color: red;
            border-left:0
        }
        /*菱形*/
        .shape14{
            width:0;
            height:0;
            border:50px solid transparent;
            border-bottom: 70px solid red;
            border-top: 0;
        }
        .shape15{
            width:0;
            height:0;
            border:50px solid transparent;
            border-top: 70px solid red;
            border-bottom: 0;
        }
        /*直角三角形*/
        .shape16{
            width:0;
            height:0;
            border-top: 50px solid red;
            border-right: 100px solid transparent;
        }
        .shape17{
            position: relative;
            width:200px;
            height:50px;
            border-radius: 30px;
            border:2px solid red;
        }
        .shape17:after{
            content:"";
            position: absolute;
            left:30px;
            bottom:-25px;
            width:0;
            height:0;
            border-top: 25px solid red;
            border-right: 50px solid transparent;
        }
        /*直角梯形*/
        .shape18{
            width:0;
            height:0;
            border:50px solid red;
            border-right-color: transparent;
            border-bottom: transparent;
        }
        .shape19{
            width:0;
            height:0;
            border:50px solid red;
            border-right-color: transparent;
            border-top:transparent;
        }
    </style>
</head>
<body>

	<div><a href="https://segmentfault.com/a/1190000003833676">css使用border画三角形</a><br>
	<a href="https://www.cnblogs.com/goloving/p/7142316.html"></a></div>
	
    <div class="shape1"></div>
    <div class="shape2"></div>
    <div class="shape3"></div>
    <div class="shape4"></div>
    <div class="shape5"></div>
    <div class="shape6"></div>
    <div class="shape7"></div>
    <div class="shape8"></div>
    <div class="shape9"></div>
    <div class="shape10"></div>
    <div class="shape11"></div>
    <div class="shape12"></div>
    <div class="shape13"></div>
    <div style="float:left">
        <div class="shape14"></div>
        <div class="shape15"></div>
    </div>
    <div class="shape16"></div>
    <div class="shape17"></div>
    <div class="shape18"></div>
    <div class="shape19"></div>
</body>
</html>